<template>
  <dv-border-box-8 style="padding-top: 10px">
    <dv-decoration-7 style="width:100%;height:30px;">能耗占比</dv-decoration-7>
    <div id="ringlike" style="width: 100%;height: 250px"></div>
  </dv-border-box-8>

</template>

<script>
import {getEmissionPercent} from "@/api/dv/carbon";

export default {
  name: "Ringlike",
  mounted(){
    this.initEchart();
  },
  data() {
    return  {
      energyData: {},
    }
  },
  methods:{
    getData() {
      return new Promise((resolve, reject) => {
        getEmissionPercent().then(response => {
          resolve(response.data)
        });
      })
    },
    initEchart(){
      let data = this.getData()
      data.then( res => {
        let total = res[0].totalOfficePowerConsume + res[0].totalOfficeWaterConsume + res[0].totalWaterConsume + res[0].totalPowerConsume
        let myChart = this.$echarts.init(document.getElementById('ringlike'),'dark');
        let option = {
          backgroundColor: '',
          tooltip: {
            trigger: 'item'
          },
          series: [
            {
              name: '能耗占比',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: true,
                formatter(param) {
                  // correct the percentage
                  return param.name + ' (' + param.percent + '%)';
                }
              },
              data: [
                { value: res[0].totalOfficePowerConsume, name: '办公耗电量' },
                { value: res[0].totalOfficeWaterConsume, name: '办公用水量' },
                { value: res[0].totalWaterConsume, name: '生产用水量' },
                { value: res[0].totalPowerConsume, name: '生产耗电量' }
              ]
            },
            {
              name: '总数',
              type: 'pie',
              radius: ['0%', '0%'],
              itemStyle: { // 防止鼠标悬浮到标签时出现放大的点
                color: 'transparent'
              },
              label: {
                position: 'inside',
                formatter: `{data|{c}}\n{serie|{a}}`,
                rich: {
                  data: {
                    fontWeight: 'bold',
                    fontSize: 18,
                    color: `#fff`,
                    lineHeight: 32,
                    textBorderColor: `transparent`,
                    textBorderWidth: 0
                  },
                  serie: {
                    fontSize: 16,
                    color: `#fff`,
                    lineHeight: 18,
                    textBorderColor: `transparent`,
                    textBorderWidth: 0
                  }
                }
              },
              labelLine: {
                show: false
              },
              data: [ // 计算表格数据value总和
                total
              ]
            }
          ]
        };
        option && myChart.setOption(option);
      })


    }
  }
}
</script>

<style scoped>

</style>
